<script setup>
import {ref} from "vue";
// 导入游戏logo图片
import gunz2Logo from '@/assets/game-logos/TPS.png';
import genshinLogo from '@/assets/game-logos/GenshinImpact.png';

document.title = "3D资源分享站 - 游戏模型资源中心";
const games = [
  { 
    id: 'gunz2', 
    title: "枪神纪", 
    href: "/gunz2", 
    description: "角色模型、武器、场景资源",
    icon: "gunz2",
    logo: gunz2Logo,
    status: "available",
    professionCount: 9
  },
  { 
    id: 'honor_of_kings', 
    title: "王者荣耀", 
    href: "/honor_of_kings", 
    description: "英雄模型、技能特效、地图资源",
    icon: "honor_of_kings",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'pubg_mobile', 
    title: "和平精英", 
    href: "/pubg_mobile", 
    description: "角色模型、武器、载具资源",
    icon: "pubg_mobile",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'genshin_impact', 
    title: "原神", 
    href: "/genshin_impact", 
    description: "角色模型、武器、场景资源",
    icon: "genshin_impact",
    logo: genshinLogo,
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'league_of_legends', 
    title: "英雄联盟", 
    href: "/league_of_legends", 
    description: "英雄模型、皮肤、地图资源",
    icon: "league_of_legends",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'valorant', 
    title: "无畏契约", 
    href: "/valorant", 
    description: "特工模型、武器、地图资源",
    icon: "valorant",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'overwatch', 
    title: "守望先锋", 
    href: "/overwatch", 
    description: "英雄模型、武器、地图资源",
    icon: "overwatch",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'apex_legends', 
    title: "Apex英雄", 
    href: "/apex_legends", 
    description: "传奇模型、武器、地图资源",
    icon: "apex_legends",
    status: "coming_soon",
    professionCount: 0
  },
  { 
    id: 'fortnite', 
    title: "堡垒之夜", 
    href: "/fortnite", 
    description: "角色模型、武器、建筑资源",
    icon: "fortnite",
    status: "coming_soon",
    professionCount: 0
  }
];

const run = ref(true)
const goTo = (href) => {
  run.value = !run.value
  location.href = href
}
</script>

<template>
  <div class="games-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">3D资源分享站</h1>
      <p class="page-subtitle">游戏内3D模型、武器、场景资源分享平台</p>
      <div class="community-rules">
        <div class="rule-item">
          <span class="rule-icon">📋</span>
          <span class="rule-text">遵循MMD社区规则</span>
        </div>
        <div class="rule-item">
          <span class="rule-icon">🚫</span>
          <span class="rule-text">禁止二次配布</span>
        </div>
        <div class="rule-item">
          <span class="rule-icon">💼</span>
          <span class="rule-text">禁止商业用途</span>
        </div>
        <div class="rule-item">
          <span class="rule-icon">📝</span>
          <span class="rule-text">必须标注借物表</span>
        </div>
      </div>
    </div>

    <!-- 游戏分类网格 -->
    <transition name="fade" appear>
      <div v-if="run" class="games-grid">
        <div 
          v-for="(game, index) in games" 
          :key="game.id" 
          class="game-card"
          :class="{ 'coming-soon': game.status === 'coming_soon' }"
          :style="{ animationDelay: `${index * 0.1}s` }"
          @click="game.status === 'available' ? goTo(game.href) : null"
        >
          <div class="card-content">
            <div class="game-icon-container">
              <div class="game-icon" :class="game.icon">
                <div 
                  class="logo-content"
                  :style="game.logo ? { backgroundImage: `url(${game.logo})` } : {}"
                ></div>
              </div>
              <div v-if="game.status === 'coming_soon'" class="coming-soon-badge">
                <span class="badge-text">敬请期待</span>
              </div>
            </div>
            
            <div class="game-info">
              <h3 class="game-title">{{ game.title }}</h3>
              <p class="game-description">{{ game.description }}</p>
              <div class="game-stats">
                <span class="stat-item" v-if="game.status === 'available'">
                  <span class="stat-icon">✅</span>
                  <span class="stat-text">可用</span>
                </span>
                <span class="stat-item" v-else>
                  <span class="stat-icon">⏳</span>
                  <span class="stat-text">开发中</span>
                </span>
                <span class="stat-item" v-if="game.professionCount > 0">
                  <span class="stat-icon">🎭</span>
                  <span class="stat-text">{{ game.professionCount }}个分类</span>
                </span>
                <span class="stat-item">
                  <span class="stat-icon">⭐</span>
                  <span class="stat-text">精选</span>
                </span>
              </div>
            </div>
          </div>
          
          <!-- 卡片边框发光效果 -->
          <div class="card-glow"></div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.games-container {
  padding: 20px 0;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInUp 0.8s ease-out;
}

.page-title {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-gold), var(--white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 10px 0;
}

.page-subtitle {
  font-size: 18px;
  color: var(--accent-silver);
  margin: 0;
  font-weight: 300;
}

.community-rules {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.rule-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.3);
  border-radius: 15px;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.rule-item:hover {
  background: rgba(79, 70, 229, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.rule-icon {
  font-size: 16px;
}

.rule-text {
  font-size: 11px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  padding: 20px 0;
}

.game-card {
  position: relative;
  background: var(--gradient-card);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  animation: fadeInUp 0.6s ease-out both;
  backdrop-filter: blur(10px);
}

.game-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: var(--accent-gold);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 175, 55, 0.3);
}

.game-card.coming-soon {
  opacity: 0.7;
  cursor: not-allowed;
}

.game-card.coming-soon:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.card-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  text-align: center;
}

.game-icon-container {
  position: relative;
  margin-bottom: 20px;
}

.game-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border: 2px solid rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.game-card:hover .game-icon {
  transform: scale(1.1);
  border-color: var(--accent-gold);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
}

.logo-content {
  width: 60px;
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* 枪神纪 Logo - 使用实际图片 */
.game-icon.gunz2 .logo-content {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 王者荣耀 Logo */
.game-icon.honor_of_kings .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='honorGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFD700;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FFA500;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 20 L60 40 L80 40 L65 55 L70 75 L50 65 L30 75 L35 55 L20 40 L40 40 Z' fill='url(%23honorGrad)'/%3E%3C/svg%3E");
}

/* 和平精英 Logo */
.game-icon.pubg_mobile .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='pubgGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2300FF00;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2300CC00;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='40' fill='url(%23pubgGrad)'/%3E%3Cpath d='M35 35 L65 35 L65 65 L35 65 Z' fill='%23FFF'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%2300FF00' font-size='16' font-weight='bold'%3EPUBG%3C/text%3E%3C/svg%3E");
}

/* 原神 Logo - 使用实际图片 */
.game-icon.genshin_impact .logo-content {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 英雄联盟 Logo */
.game-icon.league_of_legends .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='lolGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23D4AF37;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23B8941F;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 15 L60 30 L80 30 L65 45 L70 65 L50 55 L30 65 L35 45 L20 30 L40 30 Z' fill='url(%23lolGrad)'/%3E%3Ctext x='50' y='85' text-anchor='middle' fill='%23D4AF37' font-size='8' font-weight='bold'%3ELOL%3C/text%3E%3C/svg%3E");
}

/* 无畏契约 Logo */
.game-icon.valorant .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='valorantGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF4655;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23CC0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 25 L70 25 L70 75 L30 75 Z' fill='url(%23valorantGrad)'/%3E%3Cpath d='M35 30 L65 30 L65 70 L35 70 Z' fill='%23FFF'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%23FF4655' font-size='12' font-weight='bold'%3EV%3C/text%3E%3C/svg%3E");
}

/* 守望先锋 Logo */
.game-icon.overwatch .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='owGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF9C00;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='45' fill='url(%23owGrad)'/%3E%3Cpath d='M50 20 L60 40 L80 40 L65 55 L70 75 L50 65 L30 75 L35 55 L20 40 L40 40 Z' fill='%23FFF'/%3E%3C/svg%3E");
}

/* Apex英雄 Logo */
.game-icon.apex_legends .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='apexGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23CC0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 15 L70 40 L60 70 L40 70 L30 40 Z' fill='url(%23apexGrad)'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%23FFF' font-size='10' font-weight='bold'%3EA%3C/text%3E%3C/svg%3E");
}

/* 堡垒之夜 Logo */
.game-icon.fortnite .logo-content {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='fortniteGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%2300FFFF;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%2300CCCC;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M30 30 L70 30 L70 70 L30 70 Z' fill='url(%23fortniteGrad)'/%3E%3Cpath d='M35 35 L65 35 L65 65 L35 65 Z' fill='%23FFF'/%3E%3Ctext x='50' y='55' text-anchor='middle' fill='%2300FFFF' font-size='12' font-weight='bold'%3EF%3C/text%3E%3C/svg%3E");
}

.coming-soon-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, var(--accent-gold), #b8941f);
  color: var(--primary-black);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.badge-text {
  font-size: 11px;
}

.game-info {
  text-align: center;
}

.game-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px 0;
}

.game-description {
  font-size: 14px;
  color: var(--accent-silver);
  text-align: center;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 15px;
  color: var(--accent-gold);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-icon {
  font-size: 12px;
}

.card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.game-card:hover .card-glow {
  opacity: 1;
  animation: glow 2s ease-in-out infinite;
}

/* 动画效果 */
.fade-enter-active {
  animation: fadeInUp 0.8s ease-out;
}

.fade-leave-active {
  animation: fadeOutDown 0.5s ease-in;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 28px;
  }
  
  .page-subtitle {
    font-size: 16px;
  }
  
  .games-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  
  .game-icon {
    width: 60px;
    height: 60px;
  }
  
  .logo-content {
    width: 45px;
    height: 45px;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .game-title {
    font-size: 20px;
  }
  
  .game-stats {
    gap: 10px;
  }
  
  .stat-item {
    padding: 5px 8px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .games-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .game-stats {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
